<template>
  <div class="body-content">
    <div class="order-info-div">
      <div class="order-info-title paragraph-p2-heavy">
        订单明细
      </div>
      <div class="order-info-field">
        <div class="order-info-field-left paragraph-p2-light">订单状态</div>
        <div class="order-info-field-right paragraph-p2-heavy">
          <div></div>
          <div class="order-info-field-right-right div-align-justify-center">
            <svg v-if="order.orderStatus !== '已完成'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6666 8.00016C14.6666 11.6802 11.6799 14.6668 7.99992 14.6668C4.31992 14.6668 1.33325 11.6802 1.33325 8.00016C1.33325 4.32016 4.31992 1.3335 7.99992 1.3335C11.6799 1.3335 14.6666 4.32016 14.6666 8.00016Z" stroke="#F2360D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M10.4734 10.1202L8.40675 8.88684C8.04675 8.6735 7.75342 8.16017 7.75342 7.74017V5.00684" stroke="#F2360D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg v-if="order.orderStatus === '已完成'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.00016 14.6668C11.6668 14.6668 14.6668 11.6668 14.6668 8.00016C14.6668 4.3335 11.6668 1.3335 8.00016 1.3335C4.3335 1.3335 1.3335 4.3335 1.3335 8.00016C1.3335 11.6668 4.3335 14.6668 8.00016 14.6668Z" stroke="#2EB896" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M5.1665 7.99995L7.05317 9.88661L10.8332 6.11328" stroke="#2EB896" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="padding-left-4">{{ order.orderStatus }}</span>
          </div>
        </div>
      </div>
      <div class="order-info-field">
        <div class="order-info-field-left paragraph-p2-light">订单号</div>
        <div class="order-info-field-right body-heavy color-grey">{{ order.id }}</div>
      </div>
      <div class="order-info-field">
        <div class="order-info-field-left paragraph-p2-light">销售员</div>
        <div class="order-info-field-right body-heavy color-grey">{{ order.saleUser }}</div>
      </div>
      <div class="order-info-field">
        <div class="order-info-field-left paragraph-p2-light">出单时间</div>
        <div class="order-info-field-right body-heavy color-grey">{{ order.orderTime }}</div>
      </div>
      <div class="order-info-field">
        <div class="order-info-field-left paragraph-p2-light">完成时间</div>
        <div class="order-info-field-right body-heavy color-grey">{{ order.completedTime }}</div>
      </div>
    </div>
    <div class="order-info-div">
      <div class="order-info-title paragraph-p2-heavy">
        商品&nbsp;<span class="color-red">*</span>
      </div>
      <div class="order-item-product-item">
        <div class="order-item-product">
          <van-image class="img-64" :src="order.product.picture" alt=""></van-image>
          <div class="order-item-product-content">
            <div class="order-item-product-content-desc paragraph-p2-light text-desc">
              {{ order.product.desc }}
            </div>
            <div class="order-item-product-content-category paragraph-p3-light">
              {{ order.product.category + '；' + order.product.size + '；' + order.product.fitting }}
            </div>
          </div>
        </div>
        <div class="order-item-product-price paragraph-p2-light color-black">
          ${{ $baseJS.numberFormatter(order.product.totalPrice) }}
        </div>
      </div>
    </div>
    <div class="order-info-div">
      <div class="order-info-title paragraph-p2-heavy">
        支付方式&nbsp;<span class="color-red">*</span>
      </div>
      <div class="paragraph-p2-light">{{ order.paymentMethod }}</div>
      <div class="paragraph-p3-light color-grey">{{ order.paymentNote }}</div>
      <div class="order-info-picture-list">
        <field-picture-list :picture-list="order.paymentPictureList"></field-picture-list>
      </div>
    </div>
    <div class="order-info-div">
      <div class="order-info-title paragraph-p2-heavy">
        提货方式&nbsp;<span class="color-red">*</span>
      </div>
      <div class="paragraph-p2-light">{{ order.deliveryMethod }}</div>
    </div>
    <div class="order-info-div">
      <div class="order-info-title paragraph-p2-heavy">
        备注
      </div>
      <div class="paragraph-p2-light color-grey">{{ order.note }}</div>
    </div>
    <div class="order-info-div">
      <div class="order-info-title paragraph-p2-heavy">
        附件
      </div>
      <div class="order-info-picture-list">
        <field-picture-list :picture-list="order.attachmentList"></field-picture-list>
      </div>
    </div>
    <div class="order-item-act paragraph-p2-heavy">
      <div class="order-item-act-button order-item-act-button-cancel"
           v-if="orderSetting.ifShowCancel"
           @click="orderCancel"
      >取消订单</div>
      <div v-if="ifShowConfirmButton"
           class="order-item-act-button order-item-act-button-confirm"
           :class="orderSetting.confirmDialogTitle ? 'background-color-yellow' : '' "
           @click="orderConfirm"
      >{{orderSetting.confirmButton}}</div>
    </div>
  </div>
</template>
<script>
import FieldPictureList from '@/components/Field/PictureList'
import {changeOrderStatus, deleteOrder, viewOrderDetail} from "@/request/api";
import {Dialog, Image, Toast} from "vant";
const orderSettingList = [
  {statusTag: '有余款', confirmButton: '确认已收全款', confirmDialogTitle: '确认已收全款？', ifShowCancel: true},
  {statusTag: '待核款', confirmButton: '确认核款', confirmDialogTitle: '确认核款？', ifShowCancel: true},
  {statusTag: '待发货', confirmButton: '确认发货', confirmDialogTitle: '确认发货？', ifShowCancel: true},
  {statusTag: '待自提', confirmButton: '确认自提', confirmDialogTitle: '确认自提？', ifShowCancel: true},
  {statusTag: '已发货', confirmButton: '已发单号', confirmDialogTitle: '已发单号？', ifShowCancel: false},
  {statusTag: '寄卖待结', confirmButton: '确认与卖家结款', confirmDialogTitle: '确认与卖家结款？', ifShowCancel: false},
  {statusTag: '已完成', confirmButton: '订单详情', confirmDialogTitle: '', ifShowCancel: false},
]
export default {
  name: "OrderInfo",
  components: {
    [Image.name]: Image,
    FieldPictureList,
  },
  data() {
    return {
      ifShowDetail: true,
      orderSetting: orderSettingList[Number(this.$route.params.type)],
      isAdmin: this.$baseJS.getLoginUser().isAdmin,
      ifShowConfirmButton: true,
      order: {
        id: Number,
        orderNo: '',
        orderStatus: '',
        saleUser: '',
        orderTime: '',
        completedTime: '----',
        paymentMethod: '',
        paymentNote: '',
        note:'',
        paymentPictureList: [],
        attachmentList: [],
        product: {
          id: Number,
          picture: '',
          desc: '',
          category: '',
          fitting: '',
          size: '',
          totalPrice: 0,
        },
      },
    };
  },
  mounted() {
    const orderType = this.$route.params.type
    if (!this.isAdmin) {
      this.ifShowConfirmButton = Number(orderType) !== this.GLOBAL.listItemType.order.verification
    }
    if (this.ifShowConfirmButton) {
      this.ifShowConfirmButton = Number(orderType) !== this.GLOBAL.listItemType.order.completed
    }
    this.getOrderDetail()
  },
  methods: {
    getOrderDetail() {
      viewOrderDetail({ pathParam: this.$route.params.id}).then(res => {
        const { State, Data, Msg } = res
        if (State) {
          const { id, user, product_id, order_status, payment_method, payment_note, delivery_method, note, created_at, updated_at, payment_image_list, attachment, product } = Data
          const {product_image_list, product_description, product_category, size , accessories, product_sale_price } = product
          this.order.id = id
          this.order.orderStatus = order_status
          this.order.saleUser = user
          this.order.orderTime = created_at
          this.order.completedTime = updated_at
          this.order.deliveryMethod = delivery_method
          this.order.paymentMethod = payment_method
          this.order.paymentNote = payment_note
          this.order.note = note
          this.order.product.id = product_id
          this.order.product.picture = product_image_list ? product_image_list[0] : ''
          this.order.product.desc = product_description
          this.order.product.category = product_category
          this.order.product.size = size
          this.order.product.fitting = accessories
          this.order.product.totalPrice = product_sale_price

          if (payment_image_list) {
            payment_image_list.forEach(paymentImg => {
              const { url } = paymentImg
              let type = 'image'
              if (url) {
                if (url.indexOf('.mp4') > 0 || url.indexOf('.mov') > 0) {
                  type = 'video'
                }
              }
              const paymentPicItem = { type: type, url: url}
              this.order.paymentPictureList.push(paymentPicItem)
            })
          }
          if (attachment) {
            attachment.forEach(attachmentImg => {
              const { url } = attachmentImg
              let type = 'image'
              if (url) {
                if (url.indexOf('.mp4') > 0 || url.indexOf('.mov') > 0) {
                  type = 'video'
                }
              }
              const attachmentPicItem = { type: type, url: url }
              this.order.attachmentList.push(attachmentPicItem)
            })
          }
        } else {
          Toast(Msg)
        }
      })
    },
    orderConfirm: function () {
      const orderListItemType = this.GLOBAL.listItemType.order
      Dialog.confirm({
        title: this.orderSetting.confirmDialogTitle,
        className: 'paragraph-p1-light',
        cancelButtonColor: '#737373',
        confirmButtonColor: '#008061',
      }).then(() => {
        const ifSelfCategory = this.order.product.category === '自购'
        const ifSelfDelivery = this.order.deliveryMethod === '自提'
        let orderStatus = this.order.orderStatus === '有余款' ? '待核款' :
            this.order.orderStatus === '待核款' ? ifSelfDelivery ? '待自提' : '待发货' :
                this.order.orderStatus === '待发货' ? '已发货' :
                    this.order.orderStatus === '待自提' ? ifSelfCategory ? '已完成' : '寄卖待结' :
                        this.order.orderStatus === '已发货' ? ifSelfCategory ? '已完成' : '寄卖待结' :
                            this.order.orderStatus === '寄卖待结' ? '已完成' :
                                this.order.orderStatus === orderListItemType.completed ? '' : ''
        if (orderStatus) {
          this.$loading.show()
          changeOrderStatus({pathParam: this.order.id, order_status: orderStatus}).then(res => {
            const {State, Msg} = res
            if (State) {
              this.$router.push(this.GLOBAL.pathSetting.order.main + '?tab=' + Number(this.$route.params.type))
            } else { Toast(Msg) }
            this.$loading.close()
          }).catch( ()=>{ this.$loading.close() } )
        } else {
          this.orderInfo()
        }
      }).catch(() => {});
    },
    orderCancel() {
      Dialog.confirm({
        title: '取消订单',
        message: '是否确定取消此订单？',
        className: 'paragraph-p1-light',
        confirmButtonText: '确定取消订单',
        confirmButtonColor: '#C62400',
        cancelButtonText: '取消',
        cancelButtonColor: '#737373',
      }).then(() => {
        // on confirm
        let param = { pathParam: this.order.id }
        this.$loading.show()
        deleteOrder(param).then(res => {
          const { State, Msg } = res
          if (State) {
            this.$router.push(this.GLOBAL.pathSetting.order.main + '?tab=' + Number(this.$route.params.type))
          } else { Toast(Msg) }
          this.$loading.close()
        }).catch( ()=>{ this.$loading.close() } )
      }).catch(() => {
        // on cancel
      });
    },

  },
};
</script>

<style scoped>
.order-info-div {
  padding: 12px;
  margin: 8px 0;
  background: #FFFFFF;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.order-info-title {
  height: 22px;
  color: #242424;
}
.order-info-field {
  height: 38px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.order-info-field-left {
  text-align: left;
  width: 72px;
}

.order-info-field-right {
  text-align: right;
  width: 248px;
}
.order-info-field-right-right {
  padding-left: 170px;
}

.order-info-field-right > img {
  padding-top: 2px;
}

.order-info-picture-list {
  padding: 12px 0;
}

.order-item-product {
  margin: 12px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.order-item-product-content {
  margin-left: 8px;
  width: 255px;
}
.order-item-product-content-desc {}
.order-item-product-content-category {
  color: #737373;
}
.order-item-product-price{
  text-align: right;
}

.order-item-act {
  margin-top: 100px;
  display: flex;
  height: 60px;
  flex-direction: row;
  justify-content: center;
}
.order-item-act-button {
  height: 44px;
  padding: 8px 0;
  margin: 0 4px;
  border: 1px solid #FCD538;
  box-sizing: border-box;
  box-shadow: 0 4px 24px rgba(251, 202, 4, 0.32);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-item-act-button-cancel {
  width: 96px;
}

.order-item-act-button-confirm {
  width: 236px;
  background: #FCD538;
}

</style>
